<template>
  <div>
    <p>插件名：codemirror</p>
    <p>官网：<a href="https://codemirror.net/" target="_blank">https://codemirror.net/</a></p>
    <div>
      <el-button @click="initCodeMirror">div渲染</el-button>
      <el-button @click="initCodeMirrorByTextarea">text渲染</el-button>
    </div>
    <div class="codemirror" ref="codemirror"></div>
    <textarea class="codemirror" ref="codemirror2"></textarea>
  </div>
</template>

<script>
  // 核心
  import CodeMirror from 'codemirror/lib/codemirror.js' // 引入codemirror，必须
  import 'codemirror/lib/codemirror.css'; // 引入基础样式，必须

  // 模式类型：
  // 代码高亮：需在初始化配置mode这个参数的同时引入这个mode类型的高亮js文件
  // import 'codemirror/mode/javascript/javascript.js'; // javascript模式代码高亮
  // import 'codemirror/mode/htmlmixed/htmlmixed.js' // html模式代码高亮
  import 'codemirror/mode/css/css.js' // html模式代码高亮

  // 主题：要生效需引入的同时在初始化配置中配置theme这个参数
  import 'codemirror/theme/darcula.css';

  // addon：附加项，插件
  // addon/edit: 编辑类
  // addon/fold: 折叠类
  // addon/selection: 选中时状态
  import 'codemirror/addon/edit/closetag'; // 结合autoCloseTags可以实现自动关闭xml标签
  import "codemirror/addon/edit/closebrackets"; // 括号、引号编辑和删除时成对出现
  import "codemirror/addon/edit/matchbrackets"; // 定义一个选项matchBrackets: true,匹配对应的括号
  import 'codemirror/addon/fold/foldgutter.css'; // 折叠样式，折叠核心
  import 'codemirror/addon/fold/foldgutter.js'; // 折叠核心js
  // import 'codemirror/addon/fold/foldcode.js'; // 通过js控制折叠
  import "codemirror/addon/selection/active-line"; // 选中行高亮

  // 自动补全
  // import 'codemirror/addon/hint/css-hint' // 参考文档：https://juejin.cn/post/6844903637152432141


  // 代码错误检测
  import 'codemirror/addon/lint/lint.css'
  import 'codemirror/addon/lint/lint.js'
  import 'codemirror/addon/lint/css-lint.js' // 单纯引入这个还不行，需要去这个文件里看下，里面有段说明，要声明CSSLint这个变量，这个变量依赖于：Depends on csslint.js from https://github.com/stubbornella/csslint
  import 'codemirror/addon/display/autorefresh.js' // 及时自动更新

  // json化：https://juejin.cn/post/6976932937929326605
  // mysql化：https://juejin.cn/post/6948692944555933710
  // 初始化：https://juejin.cn/post/6844904159146164231

  export default {
    name: "codemirror",
    data() {
      return {
        codemirror: null,
        code: {

        }
      }
    },
    methods: {
      initCodeMirror() {
        this.codemirror = CodeMirror(this.$refs.codemirror, {
          mode:  "css", // 模式
          theme: 'darcula', // 主题样式
          value: ``, // 渲染的代码

          lineNumbers: true, // 显示代码行数
          styleActiveLine: true, // 当前光标所在行高亮
          tabSize: 2, // tab空格数
          smartIndent: true, // 是否智能缩进
          lineWrapping: true, // 自动换行
          readonly: false, // 是否只读

          autoCloseBrackets: true, // 自动关闭括号，引号当
          autoCloseTags: true, // 自动关闭标签
          foldGutter: true, // 代码可折叠
          gutters: ["CodeMirror-lint-markers", "CodeMirror-linenumbers", "CodeMirror-foldgutter", ], // 可折叠配置

          matchTags: true, // 匹配标签
          matchBrackets: true, // 匹配括号，引号等



          lint: true,
          autoRefresh: true
          // lintOnChange: true,
        });
      },
      initCodeMirrorByTextarea() {
        CodeMirror.fromTextArea(this.$refs.codemirror2, {
          mode:  "css", // 模式
          theme: 'darcula', // 主题样式
          value: ``, // 渲染的代码

          lineNumbers: true, // 显示代码行数
          styleActiveLine: true, // 当前光标所在行高亮

          autoCloseBrackets: true, // 自动关闭括号，引号当
          autoCloseTags: true, // 自动关闭标签
          foldGutter: true, // 代码可折叠
          gutters: ["CodeMirror-lint-markers", "CodeMirror-linenumbers", "CodeMirror-foldgutter", ], // 可折叠配置

          matchTags: true, // 匹配标签
          matchBrackets: true, // 匹配括号，引号等

          lint: true,
          autoRefresh: true
          // lintOnChange: true,
        })
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>

</style>
